CSS: Hintergrund mit doppeltem Farbverlauf

Die Aufgabenstellung für einen Hintergrund mit doppelten Farbverlauf ist Folgende: Ein weißer Hintergrund soll am linken und rechten Seitenrand, wie in Abbildung A, langsam zu grau werden. Wenn man mit einem Layout mit fester Seitenbreite arbeitet, ist der gewünschte Farbverlaufseffekt recht einfach zu erzielen: Hier braucht man nur ein Hintergrundbild mit der entsprechenden Breite, welches die Farbverläufe an den Rändern aufweist. Und dann muss man nur noch eine Style-Anweisung erstellen, welche dieses Hintergrundbild auf den body-Tag anwendet und vertikal wiederholt – das ist alles.

Die Herausforderung bei diesem Projekt besteht darin, dass das Layout flexibel ist. Das bedeutet: Der Hintergrund verändert sich zusammen mit dem Browserfenster in der Größe. Ein einzelnes Hintergrundbild würde diese Größenänderung nicht mitmachen, daher müssen separate Bilder für den linken und rechten Farbverlauf verwendet werden. Da jedes Seitenelement nur ein Hintergrundbild haben kann, bedarf es einiger Tricks, um einen Hintergrund zu erstellen, der zwei Hintergrundbilder enthält, das gesamte Browserfenster unabhängig vom Inhalt ausfüllt und auch noch in allen wichtigen aktuellen Browsern funktioniert.